<template>
  <div class="edit">
    <div class="editcon">
      <div class="title">值班人员（{{ duteType == 1 ? '分控中心' : '播控中心' }}） - 编辑</div>
      <div class="ulcon">
        <div class="listtitle">人员列表
          <img @click="add" class="add" src="/images/ct_add.png" alt="">
        </div>
        <ul>
          <li @click="selectMult(item)" :class="{ editcls: item.id == selected.id, selectcls: activeList.find(sub=>item.id==sub.id)}"
            v-for="(item) in list" :key="item.id">
            <img class="tag" v-if="activeList.find(sub=>item.id==sub.id)" :src="`/images/${item.status == 2 ? 'cm_bod' : 'cm_rest'}.png`" alt="">
            <img class="tag" v-else :src="`/images/${item.status == 1 ? 'cm_bod' : 'cm_rest'}.png`" alt="">
            <div class="editstyle" v-if="item.id == selected.id">
              <div class="editeare">
                <img src="/images/main_avatar.png" alt="">
                <div>
                  <div class="uloption" @click.stop="isShowSelect = !isShowSelect">
                    <span>{{ selected.post }}</span>
                    <img class="jiantou" src="/images/ct_arrow.png" alt="">
                    <ul v-if="isShowSelect">
                      <li @click.stop="selected.post = item.post, isShowSelect = false" v-for="item in personTypes"
                        :key="item.id">{{ item.post }}</li>
                    </ul>
                  </div>
                  <span>姓名：<input v-model="selected.name" type="text"></span>
                  <span>电话：<input v-model="selected.phone" type="text"></span>
                </div>
              </div>
              <div class="btnList">
                <span v-if="isConfirmDel" @click.stop="del" class="confirmdel">确认删除</span>
                <span v-else @click.stop="isConfirmDel = true" class="del">删除</span>

                <span @click.stop="cancel" class="cancel">取消</span>
                <span @click.stop="save" class="save">保存</span>
              </div>
            </div>
            <template v-else>
              <img @click.stop="editItem(item)" src="/images/ct_edit.png" alt="" class="icon">
              <img src="/images/main_avatar.png" alt="">
              <div class="showinfo">
                <span>{{ item.post }}</span>
                <span>姓名：{{ item.name }}</span>
                <span>电话：{{ item.phone }}</span>
              </div>
            </template>

          </li>
        </ul>
      </div>
      <div class="e-btn">
        <div @click="emit('close')" class="cancel">取消</div>
        <div @click="emit('confirm', activeList)" class="confirm">确定</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, defineProps, ref, watch, nextTick } from "vue";
import axios from 'axios';

const emit = defineEmits(["close", "confirm", "refresh"]);

const DOMINIP = ''

const props = defineProps({
  duteType: Number,
  duteList: Array
})

let isShowSelect = ref(false)
let selected = ref({})
let selectedPost = ref('')

let list = ref()

let personTypes = props.duteType == 1 ? [{
  id: 1,
  post: '区级值班人员'
}] : [
  {
    id: 'hu',
    post: '湖里街道',
  },
  {
    id: 'dian',
    post: '殿前街道',
  },
  {
    id: 'jiang',
    post: '江头街道',
  },
  {
    id: 'he',
    post: '禾山街道',
  },
  {
    id: 'jin',
    post: '金山街道',
  },
  {
    id: 'qujiaoyu',
    post: '区教育局',
  },
  {
    id: 'quyuanlin',
    post: '区园林局',
  }
]

let activeList = ref([])

let isConfirmDel = ref(false)

let selectMult = (data)=>{
  console.log('result:', activeList.value.findIndex(item=>item.id == data.id));
  let index = activeList.value.findIndex(item=>item.id == data.id)
  if(index>-1){
    activeList.value.splice(index, 1);
  }
  else{
    activeList.value.push(data)
  }

  console.log(activeList.value)
}

let editItem = (data) => {
  selected.value = data
  selectedPost.value = data.post
}

let add = () => {
  let item = {
    post: personTypes[0].post,
    name: "",
    phone: "",
    type: props.duteType
  }
  list.value.push(item)
  selected.value = item
}

let del = async () => {
  (await axios.post(DOMINIP + '/gy/att-person-info/del', {
    "id": selected.value.id,
  })).data
  isConfirmDel.value = false
  emit('refresh')
}

let cancel = async ()=>{
  if(!selected.value.id){
    list.value.pop()
  }
  selected.value = {}
}


let save = async () => {
  (await axios.post(DOMINIP + '/gy/att-person-info/saveOrEdit', {
    id: selected.value.id || null,
    "name": selected.value.name, //人员名称
    "phone": selected.value.phone, //手机号码
    "type": selected.value.type, //1 分控中心  2 播控中心
    "post": selected.value.post, //岗位名称
    "status": 2 //1值班 2休息
  })).data
  emit('refresh')

  selected.value = {}
}

watch(() => props.duteList, () => {
  list.value = props.duteList.filter(item => item.type == props.duteType)
}, {
  immediate: true,
  deep: true
})

onMounted(() => {

  nextTick(() => {
  })
})


</script>

<style lang="scss" scoped>
.edit {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;

  .editcon {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: 850px;
    height: 450px;
    border: 1px solid rgba(65, 141, 255, 0.15);
    border-radius: 8px;
    background: #0a101c;

    .title {
      color: #fff;
      padding: 12px 0;
      font-size: 20px;
      margin-top: -1px;
      font-weight: bold;
      font-style: italic;
      letter-spacing: 2px;
      background: url('/images/ctitbg.png') no-repeat;
      background-size: 100% 100%;
      text-align: center;
    }

    .ulcon {
      margin: 20px;
      padding: 10px;
      border: 1px solid rgba(65, 141, 255, 0.15);
      height: 66%;

      .listtitle {
        margin-bottom: 10px;
        margin-left: 10px;
        position: relative;

        .add {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 10px;
          width: 35px;
          cursor: pointer;
        }
      }

      >ul {
        overflow-y: auto;
        height: 92%;
        flex-wrap: wrap;
        display: flex;
        align-items: flex-start;
        width: 100%;
        color: #fff;

        >li {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 31%;
          margin: 0 1% 1%;
          padding: 10px;
          background-size: 100% 100%;
          border: 1px solid rgba(65, 141, 255, 0.15);
          border-radius: 8px;
          position: relative;
          cursor: pointer;

          >img {
            width: 25%;
            height: auto;
          }

          .tag {
            width: 18%;
            position: absolute;
            top: 0;
            left: 0;
          }

          .icon {
            width: 10%;
            position: absolute;
            top: 4px;
            right: 4px;
            display: none;
          }

          &:hover {
            .icon {
              display: inline-block;
            }
          }

          .showinfo {
            width: 70%;
            margin-left: 5%;
            display: flex;
            flex-direction: column;
            align-items: center;

            >span {
              text-align: left;
              width: 100%;
              font-size: 12px;
              line-height: 1.2;
              color: rgba(255, 255, 255, 0.6);
              margin: 2px 0;

              &:first-of-type {
                font-size: 14px;
                margin-bottom: 4px;
                font-weight: bold;
                color: #fff;
              }
            }
          }
        }

        .editcls {
          background: #1b2338;

          .editstyle {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;

            .editeare {
              display: flex;
              align-items: center;

              >img {
                width: 25%;
                height: auto;
              }


              >div {
                width: 70%;
                margin-left: 5%;
                display: flex;
                flex-direction: column;
                align-items: center;

                .uloption {
                  width: 100%;
                  padding: 2px 4px;
                  background: #0a101c;
                  position: relative;

                  .jiantou {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    right: 2px;
                    width: 20px;
                    cursor: pointer;
                  }

                  >span {
                    font-size: 12px;
                    cursor: pointer;
                  }

                  >ul {
                    position: absolute;
                    width: 100%;
                    top: 102%;
                    left: 0;
                    background: #0a101c;
                    font-size: 12px;
                    padding: 2px 4px;

                    >li {
                      margin: 6px 0;
                      width: 100%;
                      cursor: pointer;
                    }
                  }
                }

                >span {
                  text-align: left;
                  width: 100%;
                  font-size: 12px;
                  line-height: 1.2;
                  color: rgba(255, 255, 255, 0.6);
                  display: flex;
                  align-items: center;
                  margin: 2px 0;

                  >input {
                    background: #0a101c;
                    color: #fff;
                    border: none;
                    width: 76%;
                    padding: 2px;
                    height: 100%;
                  }

                }
              }
            }

            .btnList {
              width: 100%;
              margin-top: 10px;
              text-align: center;

              >span {
                padding: 2px 6px;
                font-size: 12px;
                font-style: italic;
                cursor: pointer;
                margin: 0 4px;
                letter-spacing: 2px;
              }

              .cancel {
                background: #1b2338;
                border: 1px solid #303d5d;
              }

              .save {
                background: #0f46aa;
                border: 1px solid #0574e5;
              }

              .del {
                color: #ff0030;
                border: 1px solid #ff0030;
              }

              .confirmdel {
                background: #ff0030;
                border: 1px solid #ff0030;
                color: #fff;
              }

            }
          }
        }

        .selectcls {
          border: 1px solid #0f50b3;
        }
      }
    }

    .e-btn {
      color: #fff;
      display: flex;
      justify-content: flex-end;
      margin-right: 20px;
      margin-bottom: 20px;

      >div {
        padding: 10px 30px;
        font-style: italic;
        cursor: pointer;
        letter-spacing: 2px;
        margin-left: 10px;
      }

      .cancel {
        background: #1b2338;
        border: 1px solid #303d5d;
      }

      .confirm {
        background: #0f46aa;
        border: 1px solid #0574e5;
      }
    }
  }
}
</style>